import React from 'react';
import { Modal, Form, Input, DatePicker, Select, Button, message } from 'antd';

const { Option } = Select;

interface CreateFormProps {
  modalVisible: boolean;
  onCancel: () => void;
  onSubmit: (values: any) => void;
}

const CreateForm: React.FC<CreateFormProps> = ({ modalVisible, onCancel, onSubmit }) => {
  const [form] = Form.useForm();

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      onSubmit(values);
    } catch (error) {
      message.error('请检查表单字段是否正确填写');
    }
  };

  return (
    <Modal
      title="新建"
      visible={modalVisible}
      onCancel={onCancel}
      footer={[
        <Button key="cancel" onClick={onCancel}>
          取消
        </Button>,
        <Button key="submit" type="primary" onClick={handleSubmit}>
          提交
        </Button>,
      ]}
    >
      <Form form={form} layout="vertical">
        {/* Username */}
        <Form.Item
          label="Username"
          name="username"
          rules={[
            { required: true, message: '请输入用户名！' },
          ]}
        >
          <Input placeholder="请输入用户名" />
        </Form.Item>

        {/* Display Name */}
        <Form.Item
          label="Display Name"
          name="display_name"
          rules={[
            { required: false },
          ]}
        >
          <Input placeholder="请输入显示名称（可选）" />
        </Form.Item>

        {/* Create Time */}
        <Form.Item
          label="Create Time"
          name="create_time"
          rules={[
            { required: true, message: '请选择创建时间！' },
          ]}
        >
          <DatePicker showTime placeholder="选择创建时间" />
        </Form.Item>

        {/* Status */}
        <Form.Item
          label="Status"
          name="status"
          rules={[
            { required: true, message: '请选择状态！' },
          ]}
        >
          <Select placeholder="请选择状态">
            <Option value={1}>Enabled</Option>
            <Option value={0}>Disabled</Option>
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateForm;